<template>
  <a-button type="primary" v-if="hasExportAuth() && config.exportConfig" preIcon="ant-design:export-outlined" @click="onExportXls()"> 导出</a-button>
  <a-upload
    name="file"
    :showUploadList="false"
    v-if="hasImportAuth() && config.importConfig && !config.importConfig.showModal"
    :customRequest="(file) => onImportXls(file)"
  >
    <a-button type="primary" preIcon="ant-design:import-outlined">导入</a-button>
  </a-upload>

  <a-button
    type="primary"
    preIcon="ant-design:import-outlined"
    v-if="hasImportAuth() && config.importConfig && config.importConfig.showModal"
    @click="handleOpenExcelImport"
  >
    导入
  </a-button>
  <ExcelImportModel @register="registerModal" :importRequest="(data) => onImportXls(data)" />
</template>

<script lang="ts" setup name="ExcelButton">
  import { PropType } from "vue"
  import qs from "qs"
  import { usePermission } from "/@/hooks/web/usePermission"
  import { useMethods } from "/@/hooks/system/useMethods"
  import { useMessage } from "/@/hooks/web/useMessage"
  import { useModal } from "/@/components/Modal"
  import ExcelImportModel from "./ExcelImportModel.vue"
  import { isFunction } from "lodash"
  import { useGlobSetting } from "/@/hooks/setting"
  const glob = useGlobSetting()
  const [registerModal, { openModal }] = useModal()
  // 定义 excel 方法所需参数
  interface ExcelConfig {
    // 导出配置
    exportConfig: {
      url: () => string
      // 导出文件名
      name?: string | (() => string)
      // 查询参数
      params?: object
      //按钮权限
      auth?: string | string[]
    }
    // 导入配置
    importConfig: {
      url: () => string
      // 是否展示导入模型, 可以对导入进行一些提示以及模板下载
      showModal?: boolean
      // 模板名称
      name?: string
      // 提示的文章唯一标识
      tipArticleCode?: string
      // 导入成功后的回调
      success?: (fileInfo?: any) => void
      // 导出失败后的回调
      fail?: (error?: any) => void
      //按钮权限
      auth?: string | string[]
    }
  }

  const props = defineProps({
    config: {
      type: Object as PropType<ExcelConfig>,
      default: null,
    },
  })
  //按钮权限问题
  const { hasPermission } = usePermission()
  //导入导出方法
  const { handleExportXls, handleImportXls } = useMethods()

  const $message = useMessage()
  // 导出 excel
  async function onExportXls() {
    let { url, name, params } = props.config?.exportConfig ?? {}
    if (url && isFunction(url)) {
      let title = typeof name === "function" ? name() : name
      return handleExportXls(title as string, await url(), params)
    } else {
      $message.createMessage.warn("没有传递 export.url 参数")
      return Promise.reject()
    }
  }

  // 导入 excel
  async function onImportXls({ file, importParams }) {
    let { url, success, fail } = props.config?.importConfig ?? {}
    if (url && isFunction(url)) {
      let requestUrl = await url()
      requestUrl = glob.domainUrl + glob.urlPrefix + requestUrl + (requestUrl.indexOf('?') == -1 ? '?' : '&') + qs.stringify(importParams)
      return handleImportXls(file, requestUrl, success, fail)
    } else {
      $message.createMessage.warn("没有传递 import.url 参数")
      return Promise.reject()
    }
  }

  function handleOpenExcelImport() {
    openModal(true, {
      ...props.config.importConfig,
    })
  }

  // 导入按钮权限
  function hasImportAuth() {
    let auth = props.config?.importConfig?.auth
    return auth && auth.length > 0 ? hasPermission(auth) : true
  }

  // 导出按钮权限
  function hasExportAuth() {
    let auth = props.config?.exportConfig?.auth
    return auth && auth.length > 0 ? hasPermission(auth) : true
  }
</script>

<style scoped lang="less"></style>
